<template>
     <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="() => { $router.back('/xiangqing') }" />
        <van-empty
     v-if="!cartData.length"   
  image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
  image-size="80"
  description="描述文字"
/>
<div v-else>
    <van-swipe-cell v-for="item in cartData">
  <van-card
    :price="item.goods.goods_price"
    :title="item.goods.goods_name"
    class="goods-card"
    :thumb="item.goods.goods_small_logo">
       <template #thumb>
          <div style="display: flex; width: 120px;">
             <van-checkbox v-model="item.checked"></van-checkbox>
              <van-image style="width: 100px;" :src="item.goods.goods_small_logo"/>
          </div>
       </template>
       <template #num>
             <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
       </template>
  </van-card>
  <template #right>
    <van-button square text="删除" type="danger" class="delete-button" @click="sx(item.id)" />
  </template>
</van-swipe-cell>
</div>
<van-submit-bar :price="tijiao" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="quanxuan">全选</van-checkbox>
</van-submit-bar>

</template>

<script setup>
import { ref,computed } from 'vue'
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
const cartData=ref([])
const data=()=>{
  let username=localStorage.getItem('username')
    cartData.value=store.cart.filter(item=>item.username==username)
}
data()
// 删除
const sx=(id)=>{
    store.sx(id)
    data
}
const quanxuan=computed({
    get(){
        if(cartData.value.length==0)
    {
          return false
    }
         else
         {
              return cartData.value.every(item=>item.checked)
         }
    },
    set(val)
    {
             cartData.value.forEach(item=>item.checked==val)
    }
})
// 总价
const tijiao=computed(()=>{
    let tijiao=0
    let ok=cartData.value.filter(item=>item.checked)
    ok.forEach(item=>{
        tijiao+=item.number*item.goods.goods_price
    })
    return tijiao*100
})
</script>

<style lang="scss" scoped>

</style>